<!doctype html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>交款申请</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../css/mui.min.css" rel="stylesheet" />
    <style>
      html {
        font-family: Roboto, Arial, "Noto Sans CJK SC", "Noto Sans CJK TC", "Pingfang SC", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif;
      }
      
      body {
        overflow-x: hidden;
        background-color: #fff !important;
      }
      
      .mui-content {
        font-size: 13px;
        background-color: #fff;
      }
      
      .mui-scroll-wrapper {
        bottom: 39px;
      }
      /**/
      
      .btn-footer {
        position: absolute;
        width: 100%;
        bottom: 0;
        text-align: center;
        margin-bottom: 2px;
      }
      .pay-btn{
      	background-color: #FF6600;
      	border-color: #FF6600
      }
      .pay-btn:active{
      	background-color: #FF9800;
      }
      /**/
      .mask {
        position: absolute;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-color: rgb(255, 255, 255);
        font-size: 18px;
        color: #999;
        text-align: center;
        padding-top: 50px;
      }
       /**/
      .no {
        text-align: center;
        margin-top: 40px;
        color: #CCCCCC;
        font-size: 16px;
      }
      /**/
    </style>
  </head>

  <body>
    <script src="../js/mui.min.js"></script>
    <script type="text/javascript">
      mui.init()
    </script>
    <div id="app" class="mui-content">
    	<div class="mask" v-show="isInit">加载中...</div>
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div v-for="(item,index) in List" :key="index" class="mui-card">
            <div class="mui-card-header">
              <div class="mui-input-row mui-checkbox">
                <label v-text="item.storeName"></label>
                <input :name="'checkbox'+index" type="checkbox" @click="checkAll(index,item.check)">
              </div>
            </div>
            <form class="mui-input-group">
              <div v-for="(list,ind) in item.logs" :key="ind" class="mui-input-row mui-checkbox">
                <label>兑币机-{{list.shopNumber}}号机<span v-show="list.deviceNote" style="font-size: 12px;">{{'('+list.deviceNote+')'}}</span>  &emsp;&emsp;{{new Date(list.meterTime).format('yyyy-MM-dd')}}</label>
                <input :name="'checkbox'+index" :value="item.storeId" :index="ind" type="checkbox" :checked="list.check" @click="checkIt(index,ind,list.check)">
              </div>
            </form>
          </div>
          <!---->
          <div v-for="(item,index) in submitList" :key="index" class="mui-card">
            <div class="mui-card-header">
              <div class="mui-input-row mui-checkbox">
                <label>{{item.storeName}}（待受理）</label>
                <!--<input name="checkbox1" type="checkbox" disabled="disabled" checked>-->
              </div>
            </div>
            <form class="mui-input-group">
              <div v-for="(list,ind) in item.logs" :key="ind" class="mui-input-row mui-checkbox">
                <label>兑币机-{{list.shopNumber}}号机<span v-show="list.deviceNote" style="font-size: 12px;">{{'('+list.deviceNote+')'}}</span></label>
                <input name="checkbox" :value="item.storeId" :index="ind" type="checkbox" disabled="disabled" checked>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div class="btn-footer">
        <button type="button"  @click="submit" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary pay-btn">确认交款</button>
      </div>
        <div class="no" v-show="List.length===0&&submitList.length===0">
            暂无数据
        </div>
    </div>
  </body>
  <script src="../config.js" type="text/javascript" charset="utf-8"></script>
  <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
  <script>
    mui.plusReady(function() {
      var vm = new Vue({
        el: '#app',
        data: function() {
          return {
            submitList: [],
            List: [],
            isInit:true,
            isSubmiting:true
          }
        },
        mounted: function() {
          this.bindEvent()
          this.loadData()
          setTimeout(function() {
            vm.isInit = false
          }, 800)
        },
        methods: {
          bindEvent: function() {
            //
            mui('.mui-scroll-wrapper').scroll({
              scrollY: true,
              bounce: true,
              deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006，
            });
            //
            mui('.mui-input-group').on('change', 'input', function(e) {
              var value = this.checked ? "true" : "false";
              var index = this.getAttribute('index')
              this.previousElementSibling.innerText = "checked：" + value;
            });
          },
          loadData: function() {
            var sf = this
            config.ajax({
              url: '/countingBills/checkUserCounting',
              data: {
                applyTime: 1 //1表示查询已提交没受理的，传-1表示查询没提交的
              },
              success: function(res) {
                if(res.result === 1) {
                  sf.submitList = res.list
                } else {
                  mui.toast(res.errormsg)
                  sf.submitList = []
                }
              }
            })
            config.ajax({
              url: '/countingBills/checkUserCounting',
              data: {
                applyTime: -1 //1表示查询已提交没受理的，传-1表示查询没提交的
              },
              success: function(res) {
                if(res.result === 1) {
                  sf.List = res.list
                } else {
                	sf.List = []
                  mui.toast(res.errormsg)
                }
              }
            })
          },
          checkIt:function(index, ind, check) {
            var sf = this
            if(check === undefined) {
            	this.List[index].logs[ind].check = true
            } else {
            	this.List[index].logs[ind].check = !check
            }
          },
          checkAll:function(index, check) {
          	var sf = this
          	var checkboxes = document.getElementsByName("checkbox"+index)
            if(check === undefined) {
              this.List[index].check = true
              this.List[index].logs.forEach(function(item,dex) {
                item.check = true      
              })
              for(var i=0;i<checkboxes.length;i++){
                	checkboxes[i].checked = true
                }
            } else {
              this.List[index].check = !check
              this.List[index].logs.forEach(function(item) {
                item.check = !check
              })
              for(var i=0;i<checkboxes.length;i++){
                	checkboxes[i].checked = !check
                }
            }
          },
          //提交
          submit:function(){
          	var sf = this
          	mui(".btn-footer button").button('loading')
          	var inner = []
          	sf.List.forEach(function(item){
          		item.logs.forEach(function(pop){
          			if(pop.check===true){
          				inner.push({id:pop.countingBillsId,meterTime:pop.meterTime})
          			}
          		})
          	})
          	config.ajax({
          		url:'/countingBills/applyCountingBills',
          		data:{
          			applyTime:new Date().getTime(),
          			inners:inner
          		},
          		success: function(res){
          			if(res.result === 1){
									sf.loadData()
									setTimeout(function(){
										mui(".btn-footer button").button('reset')
									},200)
          			} else {
          				mui.toast(res.errormsg)
          				setTimeout(function(){
										mui(".btn-footer button").button('reset')
									},200)
          			}
          		}
          	})
          }
        }
      })
    })
  </script>

</html>